<template>
  <HerinContainer class="MainCoal-box" :delay="1" direction="Left" title="全矿用电概况">
    <!-- 内容区 -->
    <div slot="content" class="MainCoal-box-content">
      <div class="content-top-box">
        <div class="content-top">
          <div class="top-left">
            <span class="top-left-block"></span>
            <span class="top-left-span">全矿总负荷</span>
          </div>
          <div class="top-right">
            <span class="top-right-num">21,729</span><span class="company">KW</span>
          </div>
        </div>
        <div class="content-top">
          <div class="top-left">
            <span class="top-left-block"></span>
            <span class="top-left-span">全矿用电负荷率</span>
          </div>
          <div class="top-right">
            <span class="top-right-num-v2">43.1%</span>
          </div>
        </div>
      </div>
      <div class="content-center">
        <mould-box
          :datas="data"
          class="mouldbox"
          chartTitle="全矿总负荷趋势分析"
          :chartOption="chartOption"
          :text="['全矿总负荷']"
          height="10.0625rem"
        />
      </div>
      <div class="content-bottom">
        <!-- 图表标题 -->
        <div class="content-bottom-mintitle">
          <div class="charttitle">
            地上/井下供电状况监测
          </div>
          <div class="line" />
          <div />
        </div>
        <div class="bottom-card">
          <CommonCard :lists="lists"></CommonCard>
          <CommonCard :lists="lists" color="#FFD101"></CommonCard>
        </div>
      </div>
    </div>
  </HerinContainer>
</template>

<script>
import HerinContainer from '@/components/HerinContainer';
import MouldBox from '../common/MouldBox.vue';
import CommonCard from '../common/CommonCard.vue';

export default {

  components: {
    HerinContainer,
    MouldBox,
    CommonCard
  },
  data() {
    return {
      chartOption: {
        color: ['#00EFF3'],
        area: false,
        unit: 'KW'
      },
      data: [
        { x: '12-01', y: 75, s: '近30天用电量' },
        { x: '12-06', y: 30, s: '近30天用电量' },
        { x: '12-11', y: 60, s: '近30天用电量' },
        { x: '12-16', y: 37, s: '近30天用电量' },
        { x: '12-21', y: 79, s: '近30天用电量' },
        { x: '12-26', y: 42, s: '近30天用电量' },
        { x: '12-31', y: 67, s: '近30天用电量' }
      ]
    };
  },
  computed: {
    lists() {
      const data = [
        { title: '地面负荷', num: '9,826' },
        { title: '用电负荷率', num: '43.1%' },
        { title: '供电状态', num: '运行' }
      ];
      return data;
    }
  },
  methods: {
  }
};
</script>

<style lang='scss' scoped>
.MainCoal-box{
  &-content{
    .company{
      color: #838383;
      font-size: .75rem;
    }
    .content-top-box{
      width:20.625rem ;
      height: 4.5rem;
      margin-bottom: .9375rem;
      border-radius: .25rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      background-color: #1D2E45;
      padding: .625rem;
      .content-top{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .top-left{
          display: flex;
          align-items: center;
          .top-left-block{
            width: .3125rem;
            height: .3125rem;
            margin-right: .625rem;
            display: block;
            border-radius: 50%;
            background-color: #00FDFF;
          }
          .top-left-span{
            font-size: .875rem;
            color: #F8F8F8;
            vertical-align:middle;
          }
        }
        .top-right-num{
          color: #F8F8F8;
          font-size: 1rem;
          margin-right: .3125rem;
        }
        .top-right-num-v2{
          color: #00FDFF;
          font-size: 1rem;
          margin-right: .3125rem;
        }
      }
    }
    .content-bottom{
      width: 20.625rem;
      margin-top: .9375rem;
      .content-bottom-mintitle{
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.625rem;
        .charttitle{
          font-size: 0.75rem;
          color: $light2Grey;
          margin-right: 0.3125rem;
        }
        .line{
          flex: 1;
          height: 0.0625rem;
          border-bottom: 0.0625rem dashed $darkGrey;
        }
      }
      .bottom-card{
        display: flex;
        justify-content: space-between;
      }
    }
  }
}
</style>
